<template>
    <div>
        <Appdownload></Appdownload>
          <div class="ambitus-p1">精选专题</div>
        <div v-for="(item,index) in list" @click="fs(item)" :key="index" class="ambitus-top">
            <img :src=item.img alt="" class="amb-img">
            <div>
                <div class="name1">{{item.name1}}</div>
                <div class="title">{{item.title}}</div>
            </div>
        </div>
        <hr>
        <div class="ambit-bottom">
            <div class="ambot-top">热门周边</div>
            <!-- 周边 -->
            <div class="ambot-con">
                <div v-for="(item,index) in datas" :key="index" class="ambot-cen" @click="fz(item.id)">
                    <img :src="item.imge" v-lazy="item.imge" alt="" class="ambit-imge">
                    <div class="ambit-texts">{{item.texts}}</div>
                    <div class="ambit-prices">￥{{item.prices}}</div>
                 </div>
            </div>
        </div>
        <Tabbars></Tabbars>
    </div>
</template>

<script>
import Appdownload from "../components/appDownload.vue"
import Tabbars from "../components/Tabbars.vue"
import instance from '../request/api.js'
export default {
    name: 'Ambitus',

    data() {
        return {
            list:[],
            datas:[]
            
        };
    },

    mounted() {
        
    },
    components:{
        Tabbars,
        Appdownload
    },
    created() {
        this.fn();
        this.ff();
    },
    methods: {
        async fn() {
            let { data } = await instance.get("/ambits.json");
            // console.log(data.list)
            this.list =data.list;
        },
        async ff() {
            let { data } = await instance.get("/ambits.json");
            // console.log(data.datas)
            this.datas =data.datas;
            // console.log(this.datas);
        },
        fs(item){
            this.$router.push({
                name: "Jacky",
                params:{
                    name:item
                }
            }
            )
        },
        fz(id){
            let index = this.datas.find(item=> {
                return item.id == id
            })
            console.log(index);
            this.$router.push({
                path:"/detail",
                query:{
                    id:id
                }
            })
            localStorage.setItem("namea",JSON.stringify(index))


        }
    }
}
</script>

<style lang="less" scoped>
     .ambitus-p1{
           
            font-size: 19px;
            color:#000;
            padding: 22px 0 22px 22px;
        }
        .amb-img{
            width:100%;
            height: 246px;
        }
    .ambitus-top{
       padding: 0 20px;
       margin-top: 20px;
       .amb-img{
           border-radius: 10px;
       }
       .name1{
           font-size: 12px;
           color: #000;
       }
       .title{
           font-size: 12px;
           color: #ccc;
       }
    }
    .ambit-bottom{
        .ambot-top{
            font-size: 19px;
            color: #000;
            padding: 20px 0 20px 20px;
        }
        .ambot-con{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
             padding: 0 20px 0 20px;
             padding-bottom: 40px;
            //  text-align: center;
            .ambot-cen{
                width: 167px;
                height: 229px;
                margin-bottom: 27px;
                .ambit-texts{
                    font-size: 15px;
                    color:#000;
                     width: 180px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    margin: 10px 0 5px 0;
                }
                .ambit-prices{
                    font-size: 15px;
                    color: red;
                }
            }
        }
         .ambit-imge{
                 width: 100%;
                 height: 173px;
             }
    }
</style>